{% extends "admin_base.html" %}

{% block title %}
    {% if edit_flag %}
        Edit {{ form.post_type.data|capitalize }}
    {% else %}
        New {{ form.post_type.data|capitalize }}
    {% endif %}
{% endblock %}

{% block css %}
    <link href="//cdn.bootcss.com/bootstrap-markdown/2.9.0/css/bootstrap-markdown.min.css" rel="stylesheet">
{% endblock %}

{% block main %}

<form method="POST" action="" id='new-post'>
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="row">
                {% import "_form.html" as forms %}
                {{ form.csrf_token() }}
                {{ form.post_id() }}
                {{ form.post_type() }}
                {{ form.from_draft() }}
                {% if form.title.errors %}
                    <div class="clearfix has-error form-group">
                    {{ form.title.label }}
                    {{ form.title(class_="form-control") }}
                    <span class="help-block">{{ form.title.errors|join(' ') }}</span>
                    </div>
                {% else %}
                    <div class="form-group">
                    {{ form.title.label }}
                    {{ form.title(class_="form-control") }}
                    </div>
                {% endif %}

                {% if form.slug.errors %}
                    <div class="clearfix has-error form-group">
                    {{ form.slug.label }}
                    {{ form.slug(class_="form-control") }}
                    <!-- <span class="help-block">{{ url_for('main.post_detail', slug=display_slug) }}</span> -->
                    <span class="help-block">{{ form.slug.errors|join(' ') }}</span>
                    </div>
                {% else %}
                    <div class="form-group">
                    {{ form.slug.label }}
                    {{ form.slug(class_="form-control") }}
                    <!-- <span class="help-block">{{ url_for('main.post_detail', slug=display_slug) }}</span> -->
                    </div>
                {% endif %}

                <div class="form-group">
                    {{ form.raw.label }}

                    {{ form.raw(class_="form-control", rows=30, data_provide="markdown") }}
                </div>

                <div class="form-group">
                    {{ form.abstract.label }}
                    {{ form.abstract(class_="form-control", rows=5) }}
                </div>

            </div>
        
            <div class="row">
                <div class="col-md-5">
                    <h3>Tags</h3>
                    <hr>
                    <div class="input-group">
                          {{ form.tags_str(class_="form-control") }}
                          <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                {% for tag in tags %}
                                    <li><a href="#" class="tag" data-tag="{{ tag }}">{{ tag }}</a></li>
                                {% endfor %}
                            </ul>
                          </div><!-- /btn-group -->
                    </div>
                </div>
                
                <div class="col-md-5">
                    <h3>Category</h3>
                        <hr>
                        <div class="input-group">
                          {{ form.category(class_="form-control") }}
                          <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                {% for category in categories %}
                                    <li><a href="#" class="category-name" data-category="{{ category }}">{{ category }}</a></li>
                                {% endfor %}
                            </ul>
                          </div><!-- /btn-group -->
                        </div>
                </div>
            </div>
            <br><br><br><br>
            <div class="row">
                <button type="submit" class="btn btn-primary" name="publish" value="publish">Publish</button>
                <button type="submit" class="btn btn-success" name="draft" value="draft">Save draft</button>
                <!-- <button type="submit" class="btn btn-default" name="preview" value="preview" id="btn-preview">Preview</button> -->
            </div>
        
        </div>
    </div>
            
    
</form>
{% endblock %}

{% block js %}
<script src="//cdn.bootcss.com/marked/0.3.5/marked.min.js"></script>
<script src="//cdn.bootcss.com/to-markdown/1.3.0/to-markdown.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-markdown/2.9.0/js/bootstrap-markdown.min.js"></script>
<script type="text/javascript">
    // using jQuery

    // wideArea();
    
    $('.tag').on('click', function(event){
        var tag = $(this).data('tag');
        // alert(category);
        var elem = document.getElementById("tags_str");
        if(elem.value==''){
            elem.value = tag;
        }else{
            // elem.value += ', ';
            // elem.value += tag;
            elem.value = [elem.value, tag].join(', ')
        }

        // $(this).remove();
        return false
    });

    $('.category-name').on('click', function(event){
        var category = $(this).data('category');
        // alert(category);
        var elem = document.getElementById("category");
        elem.value = category;

        return false
    });

</script>
{% endblock %}